import { useDispatch, useSelector } from '@/.umi/plugin-dva/exports';
import 'antd/dist/antd.css';
import { useEffect, useRef, useState } from 'react';
import { Table, Button } from 'antd'
import './index.less'
const View = () => {
  const [loading, setLoading] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  const viewList = useSelector((state: { view: any }) => state.view);
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'view/viewList',
    });
  }, []);
  const columns = [
    {
      title: 'URL',
      dataIndex: 'url',
      key: 'url',
      fixed: 'left'
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
      key: 'browser',
    },
    {
      title: '内核',
      dataIndex: 'engine',
      key: 'engine',
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      key: 'os',
    },
    {
      title: '设备',
      dataIndex: 'device',
      key: 'device',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '访问量',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '访问时间',
      dataIndex: 'updateAt',
      key: 'updateAt',
    },
    {
      title: '操作',
      dataIndex: 'cz',
      key: 'cz',
      fixed: 'right',
      render: () => {
        return <span>删除</span>
      }
    },
  ];
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setLoading(false);
      setSelectedRowKeys([])
    }, 1000);
  };
  const onSelectChange = (selectedRowKeys:any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  }
  const ipIptVal:any = useRef()
  const uaIptVal:any = useRef()
  const urlIptVal:any = useRef()
  const addressIptVal:any = useRef()
  const browserIptVal:any = useRef()
  const coreIptVal:any = useRef()
  const osIptVal:any = useRef()
  const searchList = ()=>{
    let data = {ip:ipIptVal.current.value,userAgent:uaIptVal.current.value,url:urlIptVal.current.value,address:addressIptVal.current.value,
    browser:browserIptVal.current.value,os:osIptVal.current.value,engine:coreIptVal.current.value
    }
    dispatch({
      type:'view/viewList',
      payload:data
    })
  }
  const serachReset = ()=>{
    ipIptVal.current.value=""
    uaIptVal.current.value=""
    urlIptVal.current.value=""
    addressIptVal.current.value=""
    browserIptVal.current.value=""
    osIptVal.current.value=""
    coreIptVal.current.value=""
    dispatch({
      type:'view/viewList',
    })
  }
  const hasSelected = selectedRowKeys.length > 0;
  return <div>
    <header>
      <span>工作台 / </span><span>访问统计</span>
    </header>
    <main>
      <div className="form">
        <div className="formTop">
          <p>&emsp;&nbsp;&nbsp;&nbsp;I P：<input type="text" placeholder="请输入 IP 地址" /></p>
          <p>&nbsp;U A：<input type="text" placeholder="请输入 USER Agent" /></p>
          <p>URL：<input type="text" placeholder="请输入 URL" /></p>
          <p>地址：<input type="text" placeholder="请输入地址" /></p>
          <p>浏览器：<input type="text" placeholder="请输入浏览器" /></p>
          <p>内核：<input type="text" placeholder="请输入内核" /></p>
          <p>&nbsp;O S：<input type="text" placeholder="请输入操作系统" /></p>
          <p>设备：<input type="text" placeholder="请输入设备" /></p>
        </div>
        <div className="formBottom">
          <button className="search" onClick={searchList}>搜索</button>
          <button className="reset" onClick={serachReset}>重制</button>
        </div>
      </div>
      <div style={{ height: "16px", width: "100%", background: "#f9f9f9" }}></div>
      <div className="table">
        <div>
          <div style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
              删除
            </Button>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
          </div>
          <Table rowSelection={rowSelection} columns={columns} dataSource={viewList.viewList}
            scroll={{ x: 2000 }}
          />
        </div>
      </div>
    </main>
  </div>
}
export default View